import { PageContainer, ProTable } from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Select,
  Radio,
  Space,
  Checkbox,
  Popconfirm,
} from "antd";
import { connect } from "umi";
import { namespace, calcColumns } from "./configFile";
import { useEffect, useRef, useState } from "react";
import { PlusOutlined } from "@ant-design/icons";

const Page = (props) => {
  const { dispatch, submitLoading, venueArr } = props;
  const [open, setOpen] = useState(false);
  const [checkOpen, setCheckOpen] = useState(false);
  const [titleType, setTitleType] = useState(0);
  const [userNum, setUserNum] = useState(0);
  const [form] = Form.useForm();
  const [form2] = Form.useForm();
  const actionRef = useRef();

  // useEffect(() => {
  //   dispatch({
  //     type: `${namespace}/pageInit`,
  //   });
  // }, []);

  const editInfo = (params) => {
    setTitleType(1);
    form.setFieldsValue({ ...params });
    venueIdChange({ venueId: params.venueId });
    setOpen(true);
  };

  const venueIdChange = (params) => {
    dispatch({
      type: `${namespace}/queryVenueUserCount`,
      params,
      callback: (res) => {
        setUserNum(res);
      },
    });
  };

  const toggleState = (params) => {
    dispatch({
      type: `${namespace}/toggleState`,
      params,
      callback: (res) => {
        form.setFieldsValue({ ...res });
        actionRef.current?.reload();
        setOpen(true);
      },
    });
  };

  const operate = {
    title: "操作",
    fixed: "right",
    dataIndex: "operator",
    align: "center",
    hideInSearch: true,
    render: (_, record) => {
      let { id } = record;
      return (
        <Space>
          <Button type="link" onClick={() => editInfo(record)}>
            编辑
          </Button>
          <Popconfirm title="确定要删除" onConfirm={() => deleteItem({ id })}>
            <Button type="link" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      );
    },
  };

  const deleteItem = (params) => {
    dispatch({
      type: `${namespace}/deleteItem`,
      params,
      callback: () => {
        actionRef.current?.reload();
      },
    });
  };

  const submitForm = async () => {
    const res = await form.validateFields();
    if (res) {
      dispatch({
        type: `${namespace}/submitItem`,
        params: res,
        callback: () => {
          setOpen(false);
          actionRef.current?.reload();
        },
      });
    }
  };
  const submitFormVerify = async () => {
    const res = await form2.validateFields();
    if (res) {
      dispatch({
        type: `${namespace}/queryVerifyReq`,
        params: res,
        callback: () => {
          setOpen(false);
          actionRef.current?.reload();
        },
      });
    }
  };

  return (
    <PageContainer>
      <ProTable
        actionRef={actionRef}
        pagination={{
          showSizeChanger: true,
        }}
        toolBarRender={() => [
          <Button
            icon={<PlusOutlined />}
            type="primary"
            onClick={() => {
              setTitleType(0);
              form.resetFields();
              setUserNum(0);
              setOpen(true);
            }}
          >
            新增
          </Button>,
        ]}
        request={async (params) => {
          return await dispatch({
            type: `${namespace}/queryTable`,
            params,
          });
        }}
        scroll={{ x: 1500 }}
        columns={calcColumns({ operate })}
      />

      <Modal
        open={open}
        title={titleType ? "编辑" : "新增"}
        forceRender
        onCancel={() => {
          setOpen(false);
        }}
        footer={
          <Space>
            <Button onClick={() => setOpen(false)}>取消</Button>
            <Button onClick={submitForm} loading={submitLoading} type="primary">
              确定
            </Button>
          </Space>
        }
      >
        <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}>
          <Form.Item name="id" hidden>
            <Input />
          </Form.Item>

          {/* <Form.Item
            label="所属场馆"
            name="venueId"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Select onChange={(val) => venueIdChange({ venueId: val })}>
              {venueArr.map((v) => (
                <Select.Option value={v.id}>{v.venueName}</Select.Option>
              ))}
            </Select>
          </Form.Item> */}

          <Form.Item label="会员总数" name="userNum">
            {userNum}
          </Form.Item>

          <Form.Item
            label="发送内容"
            name="sendContent"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input.TextArea placeholder="请输入" />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        open={checkOpen}
        title={"审核"}
        forceRender
        onCancel={() => setCheckOpen(false)}
        footer={
          <Space>
            <Button onClick={() => setCheckOpen(false)}>取消</Button>
            <Button
              onClick={submitFormVerify}
              loading={submitLoading}
              type="primary"
            >
              确定
            </Button>
          </Space>
        }
      >
        <Form form={form2} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}>
          <Form.Item name="meesageId" hidden>
            <Input />
          </Form.Item>

          <Form.Item
            label="审核结果"
            name="verifyStatus"
            rules={[{ required: true, message: "审核结果不能为空" }]}
          >
            <Radio.Group>
              <Radio value={"0"}>同意</Radio>
              <Radio value={"1"}>拒绝</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            label="审核意见"
            name="verifyContent"
            rules={[{ required: true, message: "审核意见不能为空" }]}
          >
            <Input.TextArea placeholder="请输入" />
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
